<template>
<div class="userDetail-root">
  <div class="main-container">
    <user-detail-info :user-info-data="userInfoData" id='info'></user-detail-info>
    <div class="user-health-info-root">
      <nav id='nav2'>
        <nav-list :routeListData='routeListData' :replace="true" :tag="'li'" :query="{uid: this.uid}"></nav-list>
      </nav>
      <div class="table-wrap-root">
        <pkg2-table @getNextPageData="getNextPageData" :tableData='tableData' :tableMeta='tableMeta' :currentPage='currentPage' :pagination='pagination'
          :loading='loading' :tableHeight='tableHeight'>
          <template slot="special">

            <el-table-column prop="uid" label="测试类型" v-if="currentParam('test-data')">
              <template scope="scope">
                <el-select v-model="scope.row.timeType">
                  <el-option v-for="item in timeTypeOption" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </template>
            </el-table-column>

            <el-table-column v-if="currentParam('healthReport')" label="图片">
              <template scope="scope">
                <el-popover trigger="hover" placement="left">
                  <img src="" alt="" :src="scope.row.big">
                  <img :src="scope.row.thumbnail" alt="" slot="reference">
                </el-popover>

              </template>
            </el-table-column>
          </template>
        </pkg2-table>
        <aside-btn v-show="currentParam('server')" :click="showCallBackDialog" text="添加回访"></aside-btn>
      </div>
    </div>


    <el-dialog title="添加回访" size="tiny" :visible.sync="showCallBack" ref="callBack" :modal-append-to-body="false">
      <el-form ref="form" :model="addCallBackForm" :rules="rules">
        <el-form-item label="客服姓名">
          <el-input v-model="addCallBackForm.server" :value="addCallBackForm.server"></el-input>
        </el-form-item>
        <el-form-item label="回访内容" prop="content">
          <el-input type="textarea" v-model="addCallBackForm.content"></el-input>
        </el-form-item>
        <el-form-item label="回访形式">
          <el-radio-group v-model="addCallBackForm.type">
            <el-radio :label="1">电话回访</el-radio>
            <el-radio :label="2">短信回访</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <el-button slot="footer" type="primary" @click="addCallBack" :disabled='btnDisabled'>添加</el-button>
    </el-dialog>
  </div>
  <a-back :from='from'></a-back>
</div>

</template>


<script>
import userDetailInfo from '../user/user-detail-info'
// import healthInfoNav from '../user/health-info-nav'
import navList from '../../components/defaultNavList'
import aBack from '../../components/aBack'
import pkg2Table from '../../components/pkg2Table'
import asideBtn from '../../components/asideBtn'
import tableMixin from '../../mixins/tableMixin'
import {getUserInfo,addCallBack} from '@/api/api.js'
export default{
  name: 'userDetail',
  mixins: [tableMixin],
  components: {
    userDetailInfo,
    navList,
    aBack,
    pkg2Table,
    asideBtn
  },
  data () {
    return {
      uid: 0,
      from: '',
      btnDisabled: false,
      showCallBack:false,
      addCallBackForm: {
        server: 'sryk',
        content: '',
        type: 1
      },
      rules: {
        content: [
          {
            required: true,
            message: '请输入回访内容',
            trigger: 'blur'
          }
        ]
      },
      userInfoData: {},
      routeListData: {
        'test-data': {
          text: '检测数据',
          api: 'http://api.xltest.cn/sryk/test-data',
          'tableMeta': [
            {
              prop: 'time',
              label: '检测时间',
              sortable: true
            },
            {
              prop: 'serialNum',
              label: '设备序号',
              sortable: true
            },
            {
              prop: 'glycemic',
              label: '血糖值',
              sortable: true,
              formatter: this.glycemicFormatter
            }
          ]
        },
        '7timeReport': {
          text: '7次血糖评估报告',
          api: 'http://api.xltest.cn/sryk/7timeReport',
          'tableMeta': [
            {
              prop: 'time',
              label: '发送时间',
              sortable: true,
              width: 200
            },
            {
              prop: 'text',
              label: '发送内容',
              sortable: false
            }
          ]
        },
        'healthReport': {
          text: '健康报告',
          api: 'http://api.xltest.cn/sryk/healthReport',
          'tableMeta': [
            {
              prop: 'time',
              label: '提交时间',
              sortable: true,
              width: 200
            },
            {
              prop: 'title',
              label: '标题',
              sortable: false
            },
            {
              prop: 'content',
              label: '内容',
              sortable: false
            }
          ]
        },
        'server': {
          text: '客服',
          api: 'http://api.xltest.cn/sryk/server',
          'tableMeta': [
            {
              prop: 'server',
              label: '客服',
              width: 160
            },
            {
              prop: 'user',
              label: '回访用户',
              width: 160
            },
            {
              prop: 'time',
              label: '回访时间',
              sortable: true,
              width: 200
            },
            {
              prop: 'type',
              label: '回访形式',
              sortable: true,
              width: 160
            },
            {
              prop: 'content',
              label: '回访内容'
            }
          ]
        },
        'doctorSuggest': {
          text: '医生建议',
          api: 'http://api.xltest.cn/sryk/server',
          'tableMeta': [
            {
              prop: 'doctor',
              label: '医生',
              width: 160
            },
            {
              prop: 'time',
              label: '服务时间',
              sortable: true,
              width: 200
            },
            {
              prop: 'content',
              label: '建议内容'
            }
          ]
        },
        'hospitalRecord': {
          text: '医院记录',
          api: 'http://api.xltest.cn/sryk/server',
          'tableMeta': [
            {
              prop: 'time',
              label: '时间',
              sortable: true,
              width: 200
            },
            {
              prop: 'hospital',
              label: '医院'
            },
            {
              prop: 'doctor',
              label: '主管医生',
              width: 160
            },
            {
              prop: 'serverType',
              label: '服务类型'
            },
            {
              prop: 'content',
              label: '建议内容'
            }
          ]
        }
      },
      timeTypeOption: [
        {
          value: 0,
          label: '凌晨'
        },
        {
          value: 1,
          label: '早餐前'
        },
        {
          value: 2,
          label: '早晨后'
        },
        {
          value: 3,
          label: '午餐前'
        },
        {
          value: 4,
          label: '午餐后'
        },
        {
          value: 5,
          label: '晚餐前'
        },
        {
          value: 6,
          label: '晚餐后'
        },
        {
          value: 7,
          label: '睡前'
        }
      ]
    }
  },
  computed: {
  },
  methods: {
    thisTableHeight () {
      return this.tableHeightQuery(['#info', '#nav2', '#footer'])()
    },
    showCallBackDialog () {
      this.showCallBack = true
    },
    addCallBack () { // 添加回访提交表单
      var form = this.$refs.form
      form.validateField('content',
      (error) => { // 表单验证
        if (error) {
          return
        } else {
          this.btnDisabled = true
             // 验证成功发送表单
          addCallBack(this.addCallBackForm).then(data => {
            if (data.status === 200) {
              this.$notify({
                message: '成功添加回访！',
                type: 'success',
                offset: 200
              })
              form.resetFields()
              this.showCallBack = false
              this.currentPage = 1
              // tableFecth from tableMixin.js:67
              this.tableFetch(this)
              this.btnDisabled = false
            }
          })
        }
      }
      )
    },
    fetchData(){

    },
    glycemicFormatter (row) {
      return row.glycemic + 'mmol/L'
    }
  },
  mounted () {
    let that = this
    // 获取用户基本信息
    getUserInfo(that).then(res=>that.userInfoData=res.data)
    // 动态设置表格高度
    window.onresize = this.throttle(() => {
      this.thisTableHeight()
    }, 200)
  },
  updated () {
    let vm = this
    vm.$nextTick(function () {
      vm.thisTableHeight()
    })
  },
  beforeUpdate () {
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      // vm.$store.commit('setUserDetailId', to.query.uid)
      vm.uid = to.query.uid
      vm.from = from.fullPath
    })
  },
  beforeRouteLeave: (to, from, next) => {
    console.log('组件内钩子调用成功！')
    next(vm => {

    })
  }
  // beforeRouteUpdate (to, from, next) {
  //   next(vm => {

  //   })
  // }
}
</script>

<style lang="scss" >
@import '../../scss/mixin.scss';
@import '../../scss/_variables.scss';
.userDetail-root {
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  // position: relative;
  background-color: #fff;
  min-width: 1000px;
  .main-container {
    margin: 25px auto 0;
    position: relative;
    // min-width:1024px;
  }
  .table-wrap-root{
    position: relative;
  }
  nav {
    margin: 15px 0;
    ul {
      @include flexRow(flex-start);
      background-color: #f1f5fb;
      li {
        cursor: pointer;
        @include xlBorder();
        background-color: $bgc4;
        font-size: 16px;
        color: $fc1;
        // &:last-child {}
        &:not(:first-child) {
          border-left: none;
        }
        &.router-link-active {
          border-top: 4px solid $border-b1;
          border-bottom: none;
          background-color: $fc2;
        }
        a {
          display: block;
          padding: 26px;
        }
      }
    }
  }

}


</style>